<script setup lang="ts">
import card from './components/card.vue'
import useDictStore from '@/store/modules/dict'
import useApiList from './useApiList'

defineOptions({
  name: 'Welcome',
})

const sortByOptions = [
  {
    label: '最新',
    value: 1,
  },
  {
    label: '最热',
    value: 2,
  },
]
const publishTimeTypeOptions = [
  {
    label: '全部时间',
    value: 0,
  },
  {
    label: '今年发布',
    value: 1,
  },
  {
    label: '最近一月',
    value: 2,
  },
  {
    label: '最近一周',
    value: 3,
  },
  {
    label: '最近一天',
    value: 4,
  },
]
const { api_catalog, base_algorithm, api_type } = useDictStore().getDicts(
  'api_catalog',
  'base_algorithm',
  'api_type'
)
const { loading, data, searchParams, pagination, onSearch, changePageNumber, changePageSize } =
  useApiList()

onSearch()
</script>

<template>
  <el-row class="py-8">
    <el-col :offset="2" :span="20">
      <div class="mb-8">
        <el-row :gutter="12">
          <el-col :span="4">
            <el-input v-model="searchParams.apiName" placeholder="接口名称" @change="onSearch" />
          </el-col>
          <el-col :span="4">
            <el-select v-model="searchParams.sortBy" @change="onSearch">
              <el-option
                v-for="item in sortByOptions"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="searchParams.apiCatalog"
              clearable
              placeholder="全部分类"
              @change="onSearch"
            >
              <el-option
                v-for="item in api_catalog"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="searchParams.algorithmBasic"
              clearable
              placeholder="全部算法基础"
              @change="onSearch"
            >
              <el-option
                v-for="item in base_algorithm"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="searchParams.publishTimeType"
              clearable
              placeholder="全部时间"
              @change="onSearch"
            >
              <el-option
                v-for="item in publishTimeTypeOptions"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="searchParams.apiType"
              clearable
              placeholder="全部接口类型"
              @change="onSearch"
            >
              <el-option
                v-for="item in api_type"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div v-loading="loading" class="grid grid-cols-4 gap-8 mb-8">
        <card v-for="item in data" v-bind:key="item.id" :data="item" />
      </div>
      <div class="flex justify-end">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.currentPage"
          @size-change="changePageSize"
          @current-change="changePageNumber"
        />
      </div>
    </el-col>
  </el-row>
</template>
